<template>
  <div>
    <cube-page :title="pageTitle" ref="cubePage" />

    <div class="view-wrapper">
      <h1>{{ notice.title }}</h1>
      <div class="content">
        <p id="rich-text" v-html="this.notice.content"></p>
        <p align="right">{{ notice.author }}</p>
        <p align="right">
          {{ notice.createTime | dateFormat("yyyy-MM-dd") }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import CubePage from "../components/cube-page.vue";
import { getNoticeInfo } from "../api/school";

export default {
  components: {
    CubePage
  },
  data() {
    return {
      pageTitle: "公告详情",
      notice: {}
    };
  },
  mounted() {
    console.log(this.$route.query.notice);
    this.notice = this.$route.query.notice;

    if (!this.notice || !this.notice.id) {
      this.$refs.cubePage.back("/botnav/mine");
    } else {
      this.getInfo();
    }
  },
  methods: {
    getInfo() {
      getNoticeInfo(this.notice.id)
        .then(response => {
          console.log(response);
          this.notice = response.data;
        })
        .catch(error => {
          console.log(error);
          this.$toastErrorCode(error);
        });
    }
  }
};
</script>

<style>
p#rich-text {
    line-height: 1.5;
}

p#rich-text p{
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }
</style>

<style lang="stylus" scoped>
.view-wrapper {
  top: 44px;
  left: 0;
  bottom: 0;
  width: 100%;

  h1 {
    font-size: 20px;
    line-height: 24px;
    font-weight: bold;
    text-align: center;
    margin: 10px;
  }

  strong {
    font-weight: bold;
  }

  .content {
    font-size: 14px;
    line-height: 16px;
    height: 100%;
    margin: 10px;

    p {
      display: block;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
    }
  }
}

</style>
